<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		body {
			/*padding-top: 25px;*/
		}

		span {
			margin: 10px;
		}

		.Tabl {
			height: 50px;
			width: 88%;
			font-size: 14px;

			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			color: #B8B8B8;
			width: 70px;
			font-size: 13px;
		}

		.Td2 {
			color: rgb(85, 85, 85);
			font-size: 13px;
			text-align: left;
			width: 80px;

		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #D8D8D8;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		select {
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			border: none;
			background: none;
		}
	</style>
</head>

<body>
	<button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">基本信息</button>
	<table class="Tabl">
		<tr>
			<td class="Td1">绿地名称</td>
			<td class="Td2" id="ldname"></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">养护内容</td>
			<td class="Td2" id="maintenanceContent"></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">工作数量</td>
			<td class="Td2" id="maintenanceNum"></td>
			<td class="Td1">工人数量</td>
			<td class="Td2" id="peopleNum"></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>

			<td class="Td1">工具数量</td>
			<td class="Td2" id="manHour"></td>
			<td class="Td1">机械类型</td>
			<td class="Td2" id="mechanicalType"></td>
		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
		<tr>
			<td class="Td1">养护时间</td>
			<td class="Td2" id="maintenanceDate"></td>

		</tr>
	</table>
	<hr class="Hr" />
	<table class="Tabl">
		<tr>
			<td class="Td1">补充信息</td>
		</tr>
	</table>
	<table class="TabL">
		<tr>
			<td> <textarea rows="4" cols="35" placeholder="填写你的其他内容描述！" id="remark" style="color:#FF8C00"></textarea></td>
		</tr>
	</table>
	<button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">图片信息</button>
	<div style="padding: 10px;">
		<div id="imgBox1"></div>
		<div style="width: 80%;position: absolute;right: 10%;left:10%;top: 20%;z-index: 1000000;text-align: center;"
			id="bigImage"></div>
	</div>

	<!-- <table class="ButL">
		<tr>
		<td class="Td3"><button>?</button></td>
		<td class="Td3"><button>?</button></td>
		</tr>
		</table> -->
</body>
<script src="../../script/webuploader.min.js"></script>
<script src="../../script/diyUpload.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
	apiready = function () {
		var id = api.pageParam.id;
		//片区id
		var reg = $api.getStorage("userSession");
		var sids = reg.data.sysRole.sysRoleCode;
		var role = sids.role_number;
		var areaid = null;
		if (role != "construction") {
			areaid = $api.getStorage('selectpor').id
		} else {
			areaid = reg.data.areaid;
		}

		//项目id
		var proid = $api.getStorage('userSession').data.proId;

		//获取绿地养护
		$.ajax({
			type: "post",
			//async : false, //同步执行
			url: BaseServiceUrl + "mobile/mainten/view.json",
			data: {

				id: id

			},
			dataType: "json", //返回数据形式为json
			success: function (result) {

				var data = result.data
				$("#ldname").html(data.greedLand.greedLandAdministrator.name);
				$("#maintenanceContent").html(data.maintenType.name);
				$("#maintenanceNum").html(data.maintenanceNum);
				$("#peopleNum").html(data.peopleNum);
				$("#manHour").html(data.manHour);
				$("#mechanicalType").html(data.mechanicalType);
				$("#maintenanceDate").html(data.maintenanceDate);
				$("#fzpeople").html(data.fzpeople);
				$("#remark").html(data.remark);

				for (var i = 0; i < result.data.maintenPhotoList.length; i++) {
					$("#imgBox1").append(
						"<div style=\"margin-left:5px;float:left;margin-top:5px;\"><img onclick='showBig(this)'  width=\"130\" height=\"130\" src=\"" +
						BaseServiceUrl + result.data.maintenPhotoList[i].photo + "\"\/><\/div>");
				}
			}
		});
	};

	function showBig(t) {
		document.getElementById("bigImage").innerHTML = "<img src='" + t.src +
			"' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
	}

	function closeBig(t) {
		document.getElementById("bigImage").innerHTML = "";
	}
</script>

</html>